<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div style="float: left">
        <p>
          <a href="https://www.w3cschool.cn/html5/" class="j_btn">w3cshool</a>
        </p>
        <p>
          <a href="b.html" class="j_btn">b.html</a>
        </p>
        <p>
          <a href="c.html" class="j_btn">c.html</a>
        </p>
        <p>
          <a href="d.html" class="j_btn">d.html</a>
        </p>
    </div>
    <div style="border: 1px red solid;width:1000px;height: 600px;float: left" >
      <!-- 内联框架      -->
      <iframe src="b.html" id="j_iframe" width="100%" height="100%" frameborder="0"></iframe>
    </div>
</body>
<script src="../js/jquery.min.js"></script>
<script type="text/javascript">
    $(".j_btn").click(function (){
        var url = $(this).attr("href");
        $("#j_iframe").attr("src",url);
        return false;
    });
</script>
</html>